<template>
  <div class="profile-container">
    <header class="user-header">
      <div class="user-info">
        <div class="avatar">
          <el-avatar :size="60" :src="userInfo.avatar || ''">
            {{ userInfo.username ? userInfo.username.charAt(0) : '用户' }}
          </el-avatar>
        </div>
        <div class="user-details">
          <h2>{{ userInfo.username || '用户名94702005' }}</h2>
          <div class="stats">
            <span>关注 {{ userInfo.followCount || 0 }}</span>
            <span>粉丝 {{ userInfo.fansCount || 0 }}</span>
            <span>获赞 {{ userInfo.likeCount || 0 }}</span>
          </div>
        </div>
      </div>
    </header>

    <section class="reading-info">
      <div class="reading-item" v-if="recentRead.novelName">
        <h3>《{{ recentRead.novelName }}》</h3>
        <p>上次看到第{{ recentRead.chapter || 1 }}章</p>
      </div>
      <div class="reading-item" v-else>
        <h3>暂无阅读记录</h3>
        <p>快去发现好书吧</p>
      </div>
    </section>

    <section class="balance-section">
      <div class="balance-item">
        <p>金币余额(币)</p>
        <h3>{{ balance.coin || 0 }}</h3>
      </div>
      <div class="balance-item">
        <p>现金余额(元)</p>
        <h3>{{ balance.cash || '0.00' }}</h3>
      </div>
      <el-button class="withdraw-btn" type="primary" @click="handleWithdraw">微信提现</el-button>
    </section>

    <section class="feature-section">
      <div class="feature-grid">
        <div class="feature-item" v-for="item in features" :key="item.name" @click="handleFeatureClick(item.path)">
          <el-icon :size="24">
            <component :is="item.icon" />
          </el-icon>
          <p>{{ item.name }}</p>
        </div>
      </div>
    </section>

    <section class="promo-banner">
      <div class="banner-content">
        <h3>领取爱心早餐补贴</h3>
        <el-button class="promo-btn" type="warning" @click="claimBreakfast">立即领取</el-button>
      </div>
    </section>

    <section class="more-features">
      <div class="feature-list">
        <div class="list-item" v-for="item in moreFeatures" :key="item.name" @click="handleFeatureClick(item.path)">
          <el-icon>
            <component :is="item.icon" />
          </el-icon>
          <span>{{ item.name }}</span>
          <el-icon><arrow-right /></el-icon>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  Avatar as UserAvatar,
  ShoppingCart as Store,
  Clock as History,
  Message as Envelope,
  Edit as Pen,
  Download as Download,
  VideoPlay as Gamepad,
  Notebook as Book,
  Collection as StickyNote,
  User as Users,
  Present as Gift,
  Star as Crown,
  QuestionFilled as QuestionCircle,
  ArrowRight
} from '@element-plus/icons-vue'

const router = useRouter()

// 用户信息
const userInfo = ref({})
// 余额信息
const balance = ref({})
// 最近阅读
const recentRead = ref({})
// 功能列表
const features = ref([
  { name: '商城', icon: Store, path: '/store' },
  { name: '浏览历史', icon: History, path: '/history' },
  { name: '我的消息', icon: Envelope, path: '/messages' },
  { name: '成为作家', icon: Pen, path: '/author' }
])
// 更多功能
const moreFeatures = ref([
  { name: '我的下载', icon: Download, path: '/downloads' },
  { name: '游戏中心', icon: Gamepad, path: '/games' },
  { name: '阅读偏好', icon: Book, path: '/preference' },
  { name: '笔记书摘', icon: StickyNote, path: '/notes' },
  { name: '看过的人', icon: Users, path: '/visitors' },
  { name: '邀请有礼', icon: Gift, path: '/invite' },
  { name: '会员中心', icon: Crown, path: '/vip' },
  { name: '反馈与帮助', icon: QuestionCircle, path: '/help' }
])

// 获取用户数据
const fetchUserData = async () => {
  try {
    // 这里替换为实际的API调用
    // const res = await getUserProfile()
    // userInfo.value = res.data
    // balance.value = res.data.balance
    // recentRead.value = res.data.recentRead
    
    // 模拟数据
    userInfo.value = {
      username: '用户名94702005',
      avatar: '',
      followCount: 0,
      fansCount: 0,
      likeCount: 0
    }
    balance.value = {
      coin: 0,
      cash: '0.00'
    }
    recentRead.value = {
      novelName: '列车求生：我知晓下一站信息',
      chapter: 1
    }
  } catch (error) {
    console.error('获取用户信息失败', error)
  }
}

// 功能点击处理
const handleFeatureClick = (path) => {
  router.push(path)
}

// 提现处理
const handleWithdraw = () => {
  ElMessage.info('提现功能将在后续版本开放')
}

// 领取早餐补贴
const claimBreakfast = () => {
  ElMessage.success('爱心早餐补贴领取成功！')
}

onMounted(() => {
  fetchUserData()
})
</script>

<style scoped>
.profile-container {
  max-width: 600px;
  margin: 0 auto;
  background-color: #fff;
  min-height: 100vh;
  padding-bottom: 20px;
}

.user-header {
  padding: 20px 15px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  margin-right: 15px;
}

.user-details h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}

.stats {
  display: flex;
  font-size: 14px;
  color: #666;
}

.stats span {
  margin-right: 15px;
}

.reading-info {
  padding: 15px;
  background-color: #fff;
  margin-top: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.reading-item h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
}

.reading-item p {
  font-size: 14px;
  color: #999;
}

.balance-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  margin-top: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.balance-item {
  text-align: center;
}

.balance-item p {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.balance-item h3 {
  font-size: 18px;
  font-weight: 600;
}

.withdraw-btn {
  border-radius: 15px;
  padding: 8px 15px;
}

.feature-section {
  padding: 15px 0;
  background-color: #fff;
  margin-top: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  padding: 0 15px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.feature-item p {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.promo-banner {
  background-color: #fff8f0;
  margin: 10px 15px;
  padding: 15px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.banner-content h3 {
  font-size: 16px;
  font-weight: 500;
  color: #e6a23c;
}

.promo-btn {
  border-radius: 12px;
  padding: 6px 12px;
}

.more-features {
  margin-top: 10px;
  background-color: #fff;
  padding: 0 15px;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.list-item:last-child {
  border-bottom: none;
}

.list-item span {
  flex: 1;
  font-size: 15px;
  margin-left: 10px;
}
</style>